<script setup>
import { counterStore } from "../stores/counterStore";
const counter = counterStore();
const articleList = [
  {
    id: "1",
    content: "【麻城市中心】麻城经济开发区谌家园小学建设项目招标预公告",
    date: "2022-04-13",
  },
  {
    id: "2",
    content: "【麻城市中心】麻城市农村公路管理局招标计划",
    date: "2022-04-13",
  },
  {
    id: "3",
    content: "【麻城市中心】麻城经济开发区谌家园小学及附属幼儿园建设项目招标预公告",
    date: "2022-04-13",
  },
  {
    id: "4",
    content: "【汉川市中心】汉川电厂四期扩建工程电力和水管网线路迁改建设工程",
    date: "2022-04-13",
  },
  {
    id: "5",
    content: "【红安县中心】红安县 2023 年度小型水库安全监测项目设计采购施工总承包 (EPC)",
    date: "2022-04-13",
  },
  { 
    id: "6", 
    content: "海头镇宅基村土地发包项目",
    date: "2022-04-13" 
  },
  { 
    id: "7", 
    content: "先锋创业大楼(515-1室)60㎡", 
    date: "2022-04-13" 
  },
  {
    id: "8",
    content: "烟台市福山区人民政府清洋街道办事处 2023 年 04(至)05 月政府采购意向",
    date: "2022-04-13",
  },
  {
    id: "9",
    content: "同江市实验幼儿园 2023 年 05 月政府采购意向",
    date: "2022-04-13",
  },
  {
    id: "10",
    content: "侯马市第二中学校 2023 年 4 月至 12 月政府采购意向 - 城乡义务教育补助省级配套经费",
    date: "2022-04-13",
  },
  {
    id: "11",
    content:
      "太原市迎泽区卫生局卫生监督所2023年4月至12月政府采购意向-公用经费项目",
    date: "2022-04-13",
  },
  {
    id: "12",
    content:
      "侯马市第二中学校2023年4月至11月政府采购意向-城乡义务教育补助经费中央资金",
    date: "2022-04-13",
  },
  {
    id: "13",
    content: "太原市迎泽区卫生局卫生监督所 2023 年 4 月至 12 月政府采购意向 - 公用经费项目",
    date: "2022-04-13",
  },
  {
    id: "14",
    content: "侯马市第二中学校 2023 年 4 月至 8 月政府采购意向 - 城乡义务教育补助经费中央资金",
    date: "2022-04-13",
  },
  {
    id: "15",
    content: "【次氯酸钠贮存罐修理】采购公告附件",
    date: "2022-04-13",
  },
];
</script>

<template>
  <el-container style="background-color: #f8f9f8;padding: 30px;">
    <el-main>
      <p style="font-size: 15px;color: #959292;margin-bottom: 30px;">
        <router-link to="/" style="color: #959292;">首页</router-link>/
        <span style="color: black;">信息公告</span>
      </p>
      <!-- 列表 -->
      <div style="padding: 30px 30px 200px 30px;background-color: white;">
        <!-- 表头区域 -->
        <div class="header-wrapper">
          <el-col :span="3" style="margin-left: 18px;">序号</el-col>
          <el-col :span="15">公告名称</el-col>
          <el-col :span="5">
            <div style="display: flex; align-items: center; gap: 2px;margin-left: 25px;">
                         <div style="display: flex; align-items: center; gap: 2px;margin-left: 5px;">
              发布时间
              <img src="/public/images/公告列表/u202.png" style="width:20px;margin-left: 10px;margin-top: 2px;"/>
            </div>
            </div>
          </el-col>
        </div>
        <el-skeleton :rows="4" animated :loading="!articleList.length">
          <div v-for="item in articleList" :key="item.id">
            <el-row style="padding:15px 15px 5px 30px;border-bottom: 1px solid #ccc;">
              <el-col :span="3">
                <img src="/images/主页/u19.png" style="width: 25px;" />
              </el-col>
              <el-col :span="16">
               <router-link :to="`/InformationDetail/${item.id}`">
                {{ item.content }}
               </router-link>
              </el-col>
              <el-col :span="5">{{ item.date }}</el-col>
            </el-row>
          </div>
        </el-skeleton>
      </div>
    </el-main>
  </el-container>
</template>

<style scoped>
/* 一、全局样式 */
* {
  margin: 0;
  padding: 0;
  align-items: center;
  white-space: nowrap;
}
/* 修改a标签样式 */
a {
  text-decoration: none;
  color: black;
}
.header-wrapper {
  background: url("/images/公告列表//u135.png") no-repeat;
  background-size: 100% 100%;
  display: flex;
  height: 40px; /* 根据图片高度调整 */
  align-items: center;
  padding: 0 10px;
  border-bottom: 1px solid #ccc;
}
.el-container {
  max-width: 1200px;
  margin: 0 auto;
}
</style>